<template>
  <div class="community-body f-d-c">
    <!-- 头 -->
    <!-- <communityHeader></communityHeader> -->
    <!-- <headerVue :Fiexdtop="0"></headerVue> -->
    <communitywecome></communitywecome>
    <!-- 内容 -->
    <div class="community-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import headerVue from "@/components/pageHeader.vue";
// import communityHeader from "./components/communityHeader.vue";
import communitywecome from "./components/communitywecome.vue";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  watch,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    headerVue,
    // communityHeader,
    communitywecome,
  },
  setup() {
    // 头部背景色显示隐藏
    let hideHeaderBg = computed(() => {
      return store.state.hideHeaderBg;
    });
    //监听页面滚动事件
    const handleScroll = () => {
      // 通过id获取div1
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(scrollTop);
      if (scrollTop > 310) {
        store.commit("setHideHeaderBg", true);
      } else if (scrollTop < 310) {
        store.commit("setHideHeaderBg", false);
      }
      // if (scrollTop >= 310) {
      //   store.commit("setHideHeaderBg", false);
      // } else if (scrollTop < 310) {
      //   store.commit("setHideHeaderBg", true);
      // }
    };
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      // hideHeade:false,
    });

    let hideHeade = computed(() => {
      if (router.currentRoute.value.meta) {
        return router.currentRoute.value.meta.hideHeade;
      } else {
        return false;
      }
    });

    // watch(
    //   () => router.currentRoute.value.meta,
    //   (newVal, oldVal) => {
    //     data.hideHeade = newVal.hideHeade;
    //     console.log(555)
    //   }
    // );

    onMounted(() => {
      proxy.$nextTick(() => {
        window.addEventListener("scroll", handleScroll, true);
      });
    });

    onUnmounted(() => {
      store.commit("setHideHeaderBg", false);
      window.removeEventListener("scroll", handleScroll, true);
    });

    return {
      hideHeade,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.community-body {
  position: relative;
  min-height: 100vh;
  background: #f9f9f9;
}

.community-content {
  // position: fixed;
  // top: 450px;
  // width: 100%;
  // padding: 0 20%;
  // position: relative;

  // padding: 0 10%;

  z-index: 10;
  flex: 1;
  // height: 0;
  // height: calc(100vh - 70px);
}
</style>
